<template>
  <div class="container ">
    <div class="p-3 border rounded-2 m-3 shadow">
      <p>文本插值：{{ msg }}</p>
      <button v-on:click="count++" class="btn btn-primary">count:{{ count }}</button>
    </div>
    <div class="shadow m-3 rounded-3 p-3">
      <p>原始 HTML</p>
      <p v-html="html"></p>
    </div>

    <div class="shadow m-3 rounded-3 p-3">
      <p>属性绑定</p>
      <p v-bind:class="btn_class">hello world</p>
    </div>

    <div class="shadow m-3 rounded-3 p-3">
      <p>布尔值</p>
      <button :disabled="isDisabled" class="btn btn-primary">disable</button>
    </div>

    <div class="shadow m-3 rounded-3 p-3">
      <p>绑定多个值</p>
      <button v-bind="btnAttr">hello</button>
    </div>

    <div class="shadow m-3 rounded-3 p-3">
      <p>指令 v-if</p>
      <p v-if="showMe">hello </p>
      <p v-else> hello 不见了</p>
    </div>

    <div class="shadow m-3 rounded-3 p-3">
      <p>动态参数</p>
      <a :[attr]="url">百度</a>
    </div>


  </div>
</template>

<script lang="ts">
import {ref, reactive} from "vue";


export default {

  data() {
    const count = ref(0);
    return {
      msg: 'Hello World',
      count: count,
      html: '<button class="btn btn-info text-bg-success"> hello </button>',
      btn_class: 'text-primary-emphasis bg-primary-subtle p-3 border rounded-3',
      isDisabled: true,
      btnAttr: {
        class: 'px-3 py-2 rounded-2 border',
        style: 'background-color: #cfe2ff; --bs-border-color: #9ec5fe; color: var(--bs-primary-text);',
      },
      showMe: true,
      attr: 'href',
      url: 'https://www.baidu.com',


    }
  }
};
</script>
